<template>
	<div>
		<van-nav-bar
		  title="我的"
		/>
		<div class="info-container">
			<img class="bg" src="../../static/user-bg.png"></img>
			<div class="info">
				<img class="face" @click="handlePreview" :src="userInfo.face"></img>
				<div class="nickname">{{userInfo.nickname?userInfo.nickname:'未命名'}}</div>
			</div>
			<van-button class="logout" @click="handleLogout" size="mini">退出登陆</van-button>
		</div>
		<van-cell-group>
		  <van-cell  is-link to="/user-info" >
				<template v-slot:title>
					<van-icon name="user-o" />
					个人信息
				</template>
			</van-cell>
			<van-cell  is-link to="/user-change-password" >
				<template v-slot:title>
					<van-icon name="edit" />
					修改密码
				</template>
			</van-cell>	
			<van-cell  is-link to="/user-address" >
				<template v-slot:title>
					<van-icon name="location-o" />
					收货地址
				</template>
			</van-cell>
			<van-cell  is-link to="/user-buy-car" >
				<template v-slot:title>
					<van-icon name="shopping-cart-o" />
					购物车
				</template>
			</van-cell>
			<van-cell  is-link to="/user-order" >
				<template v-slot:title>
					<van-icon name="orders-o" />
					我的订单
				</template>
			</van-cell>
			<van-cell  is-link to="/user-activity" >
				<template v-slot:title>
					<van-icon name="shopping-cart-o" />
					我的活动
				</template>
			</van-cell>
			
		</van-cell-group>
	</div>
</template>

<script>
	import {Dialog,ImagePreview} from 'vant'
	export default{
		data(){
			return {
				userInfo:{}
			}
		},
		created(){
			this.userInfo = JSON.parse(sessionStorage.userInfo)
		},
		methods:{
			async handleLogout(){
				let res = await Dialog.confirm({
					title: '提示',
					message: '正在退出登录，点击确认继续',
				}).catch(err => err)
				if(res == 'confirm'){
					sessionStorage.clear()
					this.$router.push('/login')
				}
				
			},
			handlePreview(){
				ImagePreview([this.userInfo.face])
			}
		}
	}
</script>

<style lang="scss">
	.info-container{
		position: relative;
		.bg{
			width: 100%;
			height: 150px;
		}
		.info{
			position: absolute;
			display: flex;
			align-items: center;
			top: 45px;
			left: 0px;
			padding:0px 50px;
			.face{
				width: 40px;
				height: 40px;
				object-fit: cover;
				border-radius: 100%;
				margin: 10px;
			}
			.nickname{
				color: #fff;
				font-weight: bold;
			}
		}
		.logout{
			position: absolute;
			right: 5px;
			top: 5px;
		}
	}
</style>
